import Link from "../../../components/Link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Header from "../../../components/Header";
import apiOdoo from "../../../helpers/apiOdoo";
import { createSlug, getIdFromSlug } from "../../../helpers/slug";
import currencyFormat from "../../../helpers/currencyFormat";
import { LazyLoadImage } from "react-lazy-load-image-component";
import "react-lazy-load-image-component/src/effects/blur.css";
import ProductSlider from "../../../components/product/ProductSlider";
import Layout from "../../../components/Layout";
import { createOrUpdateItemCart } from "../../../helpers/cart";
import toast from "react-hot-toast";

export async function getServerSideProps( context ) {
  const { slug } = context.query;
  let product = await apiOdoo('GET', '/api/v1/product/' + getIdFromSlug(slug));
  if (product.length == 1) {
    product = product[0];
    product.description = product.description.replaceAll('<p>', '||p||');
    product.description = product.description.replaceAll('</>', '||/p||');
    product.description = product.description.replace(/(<([^>]+)>)/gi, ' ');
    product.description = product.description.replaceAll('||p||', '<p>');
    product.description = product.description.replaceAll('||/p||', '</p>');
    product.description = product.description.trim();
  }
  return { props: { product } };
}

export default function ProductDetail({ product }) {
  const router = useRouter();
  const { slug } = router.query;
  const [selectedVariant, setSelectedVariant] = useState("");
  const [quantity, setQuantity] = useState("1");
  const [similarProducts, setSimilarProducts] = useState(null);
  const [activeVariant, setActiveVariant] = useState({
    id: product.id,
    code: product.code,
    price: product.lowest_price,
    stock: product.stock_total,
    weight: product.weight,
    attributes: '',
  });
  
  useEffect(() => {
    if (product.variants.length == 1) {
      setSelectedVariant(product.variants[0].id);
    }
  }, [product]);

  useEffect(() => {
    setSimilarProducts(null);
    const getSimilarProducts = async () => {
      const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${getIdFromSlug(slug)}/similar?limit=20`);
      setSimilarProducts(dataSimilarProducts);
    }
    if (slug) getSimilarProducts();
  }, [slug]);

  useEffect(() => {
    if (selectedVariant != '') {
      let newActiveVariant = product.variants.filter((variant) => {
        return variant.id == selectedVariant;
      });
  
      if (newActiveVariant.length == 1) {
        newActiveVariant = newActiveVariant[0];
        setActiveVariant({
          id: newActiveVariant.id,
          code: newActiveVariant.code,
          price: newActiveVariant.price,
          stock: newActiveVariant.stock,
          weight: newActiveVariant.weight,
          attributes: newActiveVariant.attributes.join(', '),
        });
      }
    }
  }, [selectedVariant, product]);

  let onchangeVariant = (e) => {
    setSelectedVariant(e.target.value);
    setQuantity("1");
  }

  let addItemToCart = () => {
    if (product.variant_total > 1 && !selectedVariant) {
      toast.error('Pilih varian terlebih dahulu untuk menambahkan ke keranjang', { duration: 2000 });
      return false;
    }

    if (quantity > 0) {
      toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 });
      createOrUpdateItemCart(activeVariant.id, parseInt(quantity));
    } else {
      toast.error('Jumlah barang yang ditambahkan minimal 1 pcs', { duration: 2000 });
    }

    return true;
  }

  return (
    <>
      <Header title={`${product.name} - Indoteknik`}/>
      <Layout>
        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray_r-6 w-full h-[300px] object-contain object-center bg-white" />
        <div className="p-4 pb-10">
          <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
            {product.manufacture.name ?? '-'}
          </Link>
          <h1 className="h2 mt-2 mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>

          {product.variant_total > 1 && !selectedVariant && product.lowest_price.price > 0 ? (
            <p className="text-caption-2 text-gray-800 mb-1">Harga mulai dari:</p>
          ) : ''}

          {product.lowest_price.discount_percentage > 0 ? (
            <div className="flex gap-x-1 items-center mb-1">
              <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(activeVariant.price.price)}</p>
              <span className="badge-red">{activeVariant.price.discount_percentage}%</span>
            </div>
          ) : ''} 

          {product.lowest_price.price > 0 ? (
            <p className="text-body-lg font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
          ) : (
            <p className="text-gray_r-11">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
          )}

          <div className="flex gap-x-2 mt-5">
            <div className="w-9/12">
              <label className="form-label mb-1">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
              <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
                <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
                {product.variants.length > 1 ? (
                  product.variants.map((variant) => {
                    return (
                      <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
                    );
                  })
                ) : (
                  <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
                )}
              </select>
            </div>
            <div className="w-3/12">
              <label htmlFor="quantity" className="form-label mb-1">Jumlah</label>
              <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={(e) => setQuantity(e.target.value)} />
            </div>
          </div>

          <div className="flex gap-x-2 mt-2">
            <button className="btn-light w-full">+ Quotation</button>
            <button 
              className="btn-yellow w-full" 
              onClick={addItemToCart} 
              disabled={(product.lowest_price.price == 0 ? true : false)}
            >
              + Keranjang
            </button>
          </div>

          <div className="mt-10">
            <h2 className="font-bold mb-2">Detail Produk</h2>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Jumlah Varian</h3>
              <p className="text-gray-800">{product.variant_total} Varian</p>
            </div>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Nomor SKU</h3>
              <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p>
            </div>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Part Number</h3>
              <p className="text-gray-800" id="part_number">{activeVariant.code}</p>
            </div>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Stok</h3>
              <p className="text-gray-800" id="stock">
                {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'}
              </p>
            </div>
            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
              <h3 className="text-gray-900">Berat Barang</h3>
              <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p>
            </div>
          </div>

          <div className="mt-10">
            <h2 className="font-bold mb-4">Deskripsi Produk</h2>
            <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description != '' ? product.description : 'Belum ada deskripsi produk.')}}></div>
          </div>

          <div className="mt-10">
            <h2 className="font-bold mb-4">Produk Lainnya</h2>
            <ProductSlider products={similarProducts}/>
          </div>
        </div>
      </Layout>
    </>
  );
}